<template>
    <div>
        <wd-header title="邀请记录">
            <span class="iconfont" @click="goback" slot="left">&#xe697;</span>
        </wd-header>
        <p class="noInvited" v-if="total == null">您还未邀请过小伙伴，快去邀请吧</p>
        <div class="content" v-if="total != null">
            <div class="top">
                <span>{{total}}</span>
                <p>当前已经邀请好友个数</p>
            </div>
            <div class="border"></div>
            <div class="list">
                <div class="title">
                    <span>手机号</span>
                    <span>优惠</span>
                </div>
                <div class="detail" v-for="(item,index) in list" :key="index">
                    <div>{{item.phone_num}}</div>
                    <div>{{item.points}}</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'invitelist',
    data() {
        return {
            total: null,
            list: [],
            tel: JSON.parse(localStorage.user).user.phoneNum,
            token: JSON.parse(localStorage.user).token,
            url: 'http://www.jydsapp.com/jydsApi/api/h5/user/invitationList'
        }
    },
    methods: {
        goback() {
            this.$router.go(-1)
        }
    },
    created() {
        let str = ` { "userPhone":"${this.tel}","pageIndex":1,"token":"${this.token}" } `
        let toast = this.$Toast({
            content: '加载中…',
            iconClass: 'loader',
            autoClose:false
        })
        this.fetch({
            method: 'post',
            url: this.url,
            params: {
                "paramStr": str
            }
        }).then((response) => {
            if (response.data.code == 200) {
                toast.close()
                let res = JSON.parse(response.data.data);
                this.total = res.invitationCount
                this.list = res.invitationList
            } else if (response.data.code == 103) { //五天内未登录 token失效跳转到登陆页面
                toast.close()
                localStorage.removeItem('user')
                this.$Toast({
                    content: '请重新登录'
                })
                this.$router.replace('/login')
            } else {
                toast.close()
                console.log(response.data.message)
            }
        }).catch((error) => {
            console.log(error);
        });
    }
}
</script>
<style lang="scss" scoped>
.noInvited {
    font-size:14px;
    text-align: center;
    color: #555;
    margin-top: 50%;
}


.content{
    font-size:14px;
}

.top {
    margin-top: 30px;
    text-align: center;
    color: #fe4f4a;
    span {
        font-size: 30px;
    }
}

.border {
    height: 10px;
    width: 100%;
    margin-top: 30px;
    background: #eee;
}

.list {
    width: 100%;
    .title {
        height: 30px;
        line-height: 30px;
        display: flex;
        text-align: center;
        justify-content: space-around;
        border-bottom: 1px solid #eee;
    }
    .detail {
        height: 30px;
        line-height: 30px;
        display: flex;
        justify-content: space-around;
        border-bottom: 1px solid #eee;
    }
}
</style>
